<template>
  <a-card :bordered="false" :style="{ minHeight: `${layoutContentHeight - pageHeaderHeight}px` }">
    <div class="table-page-search-wrapper">
      <a-form
        layout="inline"
        :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
      >
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-item :label="$t('messageCenter.app.tempType')">
              <a-select v-model="queryParams.typeId" allowClear>
                <a-select-option v-for="(t, index) in types" :key="index" :value="t.name">{{ t.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item :label="$t('common.description')">
              <a-input v-model="queryParams.description" allowClear />
            </a-form-item>
          </a-col>
          <span class="table-page-search-submitButtons">
            <a-button type="primary" icon="search" @click="onQuery">{{ $t('common.query') }}</a-button>
            <a-button style="margin-left: 8px" icon="reload" @click="onReset">{{ $t('common.reset') }}</a-button>
            <a-button
              style="margin-left: 8px"
              type="primary"
              icon="plus"
              v-action:add
              v-if="$hasRouteAuth('templateDetail')"
              @click="$router.push({ name: 'templateDetail' })"
            >{{ $t('button.add') }}
            </a-button>
          </span>
        </a-row>
      </a-form>
    </div>
    <a-table ref="table" size="default" rowKey="id" :columns="columns" :dataSource="parsedData">
      <span slot="action" slot-scope="text, record" class="actionsList">
        <a
          v-action:edit
          href="javascript:;"
          @click="$router.push({ name: 'templateDetail', params: { id: record.id } })"
        >{{ $t('common.edit') }}</a
        >
        <a-divider v-action:delete type="vertical" />
        <a-popconfirm
          placement="topRight"
          :okText="$t('common.ok')"
          :cancelText="$t('common.cancel')"
          @confirm="deleteTemplate(record.id)"
        >
          <template slot="title">
            <p>{{ $t('common.delWarning', { name: $t('common.template') }) }}</p>
          </template>
          <a v-action:delete href="javascript:;">{{ $t('common.delete') }}</a>
        </a-popconfirm>
      </span>
    </a-table>
  </a-card>
</template>

<script>
import { layoutMixin } from '@/utils/mixin'
import { getTempTypeList } from '@/api/messageCenter/mos'
import { getTemplateList, deleteTemplate } from '@/api/messageCenter/template'
export default {
  name: 'Template',
  mixins: [layoutMixin],
  components: {},
  data () {
    return {
      types: [],
      queryParams: {},
      tableData: [],
      parsedData: []
    }
  },
  computed: {
    columns () {
      let colums = [
        {
          title: 'CODE',
          dataIndex: 'code',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: this.$t('common.description'),
          dataIndex: 'description',
          scopedSlots: { customRender: 'fileSize' }
        }
      ]

      if (this.$auth('edit,delete', this.$route.meta.permissionId)) {
        colums = colums.concat({
          title: this.$t('common.action'),
          dataIndex: 'action',
          width: 180,
          align: 'center',
          scopedSlots: { customRender: 'action' },
          fixed: 'right'
        })
      }
      return colums
    },

    trimedQueryParams () {
      const params = Object.assign({}, this.queryParams)
      for (const prop in params) {
        if (params.hasOwnProperty(prop) && typeof params[prop] === 'string') {
          params[prop] = params[prop].trim()
        }
      }
      return params
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getTypeList()
      this.getTemplateList()
    },

    getTypeList () {
      getTempTypeList().then(res => {
        this.types = res.data
      })
    },

    getTemplateList () {
      getTemplateList().then(res => {
        this.tableData = this.parsedData = res.data.map(ele => {
          if (!ele.description) {
            ele.description = ''
          }
          return ele
        })
      })
    },

    deleteTemplate (id) {
      deleteTemplate({ id }).then(res => {
        this.tableData = this.parsedData = this.parsedData.filter(ele => ele.id !== id)
      })
    },

    onQuery () {
      this.parsedData = this.tableData.filter(d => {
        const { typeId, description } = this.trimedQueryParams
        return (
          ((!!typeId && d.type === typeId) || !typeId) &&
          ((!!description && d.description.includes(description)) || !description)
        )
      })
    },

    onReset () {
      this.queryParams = {}
      this.parsedData = this.tableData
    }
  }
}
</script>

<style></style>
